<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <<{include file="cigoadmin@include/cssHeaderTop" /}>>
    <title><<{$pageTitle}>></title>
    <<{include file="cigoadmin@include/cssHeaderMiddle" /}>>
    <<{include file="cigoadmin@include/cssHeaderBottom" /}>>
    <style type="text/css">
        .container {
            border: 1px solid #ddd;
            border-radius: 6px;
            width: 600px;
            padding: 0px;
            margin-top: 80px;
        }

        .jumbotron {
            background-color: white;
            margin: 0px;
        }

        .title {
            color: #41578C;
            font-weight: 600;
            margin-bottom: 38px;
        }

        .form-group {
            width: 100%;
        }

        .input-group {
            width: 100%;
        }

        .input-group-addon {
            width: 100px;
            text-align: right;
        }
    </style>

    <<{include file="cigoadmin@include/jsHeaderTop" /}>>
    <<{include file="cigoadmin@include/jsHeaderMiddle" /}>>
    <<{include file="cigoadmin@include/jsHeaderBottom" /}>>

</head>
<body>
<div class="container bs-docs-container">
    <div class="jumbotron">
        <h2 class="title" style="margin-bottom: 20px;text-align: center;">
            <img style="max-width: 200px;margin: 0px auto;" src="__COMMON__/img/logo-with-name-land.png"/>
        </h2>
        <div class="panel panel-cigoadmin">
            <div class="panel-heading" style="text-align: left; font-size: 20px; font-weight: 600;">西谷后台演示Demo</div>
            <div class="panel-body">
                <form id="form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">用户名:</span>
                            <input name="username" type="text" class="form-control" placeholder="输入用户名..."/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">密码:</span>
                            <input name="password" type="password" autocomplete="new-password" class="form-control"
                                   placeholder="输入登陆密码..."/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">验证码:</span>
                            <input id="verifyCode" name="verify_code" type="text" class="form-control"
                                   placeholder="图片验证码..."/>
                            <div class="input-group-btn">
                                <div type="button" class="btn btn-default" style="padding: 0px;">
                                    <img alt="点击更换" id="verifyCodeImg" src="<<{:url('verifyCode')}>>"
                                         style="width:100px;height: 32px;"/>
                                </div>
                                <button id="refreshBtn" type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group btn-group">
                        <a id="logBtn" class="btn btn-success btn-lg" style="width: 100%;"
                           href="<<{:url('Login/doLogIn')}>>"
                           formId='form'>
                            登&nbsp;&nbsp;&nbsp;陆
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<<{include file="cigoadmin@include/jsFooter" /}>>

<script type="text/javascript">
    $(function () {
        $('#refreshBtn').click(function () {
            $("#verifyCodeImg").attr("src", '<<{:url("Login/verifyCode")}>>?random=' + Math.random());
        });
        $('#verifyCodeImg').click(function () {
            $('#refreshBtn').click();
        });
        $("#form").keydown(function (event) {
            if ((event.which || event.keyCode) == 13) {
                $('#logBtn').trigger('click');
            }
        });
        $("#logBtn").click(function (evt) {
            formPost(evt, $(this), function (data) {
                if (data.url) {
                    cigoLayer.msg(data.msg + '<br/><br/>稍后页面将自动跳转~~', {icon: 6});
                } else {
                    cigoLayer.msg(data.msg, {icon: 6});
                }
                setTimeout(function () {
                    if (data.url) {
                        parent.location.href = data.url;
                    } else {
                        location.reload();
                    }
                }, 1500);
            }, function (data) {
                cigoLayer.msg(data.msg, {icon: 5});

                $('#verifyCode').val('');
                $('#refreshBtn').click();
            });

            return false;
        });
    });

</script>
</body>
</html>
